<template>
    <Header title="账号管理" />
    <div class="userEdit">
      
      <div class="input-item">
        <van-field v-model="nickName" label="昵称" label-width="120px" placeholder="请输入昵称" />
        <van-field
          label="个性签名"
          placeholder="请输入签名"
          label-width="120px"
          v-model="desc"
        />
        <van-field label-width="120px" label="密码" placeholder="请输入密码" v-model="pwd" />
      </div>
      <van-button
        type="primary"
        round
        color="#ffc400"
        class="save-btn"
        block
      >
        保存
      </van-button>
      <van-button
        type="primary"
        round
        color="#ffc400"
        class="save-btn"
        block
        @click = "logout"
        >退出登录</van-button>
    </div>
  </template>
  
  <script setup>
  import { reactive, ref, toRefs } from "vue";
import Header from "../../components/Header.vue";
  import { useRouter } from "vue-router";
  const router = useRouter()

  const data = reactive({
    nickName:'',
    desc:'',
    pwd:''
  })

  const {nickName,desc,pwd} = {...toRefs(data)}

  

  //退出登录
  function logout(){
    localStorage.removeItem('isLogin')
    router.push('./home')
  }
  
  </script>
  <style lang="less" scoped>
    .van-button--danger {
    background-color: #ffc400;
    border-color: #ffc400;
  }
  .save-btn {
    width: 80%;
    height: 28px;
    margin: 20px auto;
  }

  </style>